<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<title></title>
<link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
<link th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/static/layui/css/layui.css}"  rel="stylesheet" />
<link th:href="@{/static/font-awesome/css/font-awesome.min.css}" type="text/css" rel="stylesheet"/>
<link th:href="@{/static/layui/css/select.css}"  type="text/css" rel="stylesheet"/>
<link th:href="@{/static/bootstrap/editable/css/bootstrap-editable.css}" rel="stylesheet" />
<link th:href="@{/static/bootstrap/table/bootstrap-table.min.css}"  rel="stylesheet" />
<link th:href="@{/static/bootstrap/zTree/bootstrap.zTree.css}"  rel="stylesheet" />
<link th:href="@{/static/miniui/themes/default/miniui.css}"  rel="stylesheet" />
<link th:href="@{/static/bootstrap/toastr/toastr.min.css}" rel="stylesheet"/>
<style type="text/css">
	/*您可以将下列样式写入自己的样式表中*/
	.childBody{padding: 15px;}
	
	/*layui 元素样式改写*/
	.layui-btn-sm{line-height: normal; font-size: 12.5px;}		
	.layui-table-view .layui-table-body{min-height: 256px;}
	.layui-table-cell .layui-input.layui-unselect{height: 30px; line-height: 30px;}
	
	/*设置 layui 表格中单元格内容溢出可见样式*/
	.table-overlay .layui-table-view,
	.table-overlay .layui-table-box,
	.table-overlay .layui-table-body{overflow: visible;}
	.table-overlay .layui-table-cell{height: auto; overflow: visible;}
	
	/*文本对齐方式*/
	.text-center{text-align: center;}
	
	.fixed-table-body {
    overflow-x: auto;
    overflow-y: auto;
    height: 88%;
	}
	/* 单选框按钮颜色 */
	.layui-form-onswitch {
	    border-color: #009688;
	    background-color: #009688;
	}
	
	.layui-form-select dl dd.layui-this { background-color: #009688 }
	
	.my-btn .layui-layer-btn a{
		background-color: #009688;
	}
	
	.tra-header-title{
		text-align:center;background: aliceblue;width:262px;
	}
	
	#transferRoot .layui-table-view .layui-table td,#transferRoot .layui-table-view .layui-table th {/* 分配用户两个表格行高 */
	    padding: 0 0;
	    border-top: none;
	    border-left: none;
	}
	
	.transfer-search{
	    display: flex;
	    align-items: center;
	    height: 28px;
	    background: white;
	    margin-top: -3px;
	    margin-bottom: -9px;
	}
</style>

</head>
<body>
<!-- shiro在js标签中不生效，而编辑删除按钮在js中动态生成，所以此处用隐藏域，在js中判断是否存在 -->
<shiro:hasPermission name="role:onAndoff"><input type="hidden" id="role-onAndoff" value='ro'/></shiro:hasPermission>
<shiro:hasPermission name="role:remove"><input type="hidden" id="role-remove" value='rr'/></shiro:hasPermission>
<section class="layui-col-md12" style="margin: 0 0 0 0; float: none;width:100%;height:100%;">
	<div class="layui-card">
		<div class="layui-card-body layui-text">
 			<div id="toolbar">
				<div>
					<button shiro:hasPermission="role:add" type="button" class="layui-btn layui-btn-sm" data-type="addRow" title="新建角色">
						<i class="layui-icon layui-icon-add-circle-fine"></i>新建角色
					</button>					
					<button shiro:hasPermission="role:divideUser" type="button" class="layui-btn layui-btn-sm" id="divideU" data-type="divideUser" title="分配成员">
						<i class="layui-icon layui-icon-user"></i>分配成员
					</button>					
					<button shiro:hasPermission="role:divedePermi" type="button" class="layui-btn layui-btn-sm" id="divideM" data-type="divideMenu" title="授予权限">
						<i class="layui-icon layui-icon-auz"></i>授予权限
					</button>
					<p style=" width: 200px;color:#009688;display: initial; margin-left: 5%;">
					提示:点击编辑按钮后双击单元格实现编辑操作;否则编辑无效</p>
					<button class="layui-btn layui-btn-sm" style="float:right;" data-type="search">搜索</button>			
					<div class="layui-inline" style="float:right;margin-right:5px;">
					    <input class="layui-input" style="height:30px;" name="key" id="key" placeholder="请输入角色名称" autocomplete="off">
					</div>
				</div>
			</div> 
			<div id="tableRes" class="table-overlay">
				<table id="dataTable" lay-filter="dataTable" class="layui-hide"></table>
			</div>
		</div>
	</div>
	
	<!-- 分配用户模态框 -->
	<div id="app" style="display: none;">
		<div class="transfer-search">
			<div class="layui-inline" style="float:right;margin-right:5px;width: 270px;">
			    <input class="layui-input" style="height:28px;" id="user_key" placeholder="请输入用户名称..." autocomplete="off" oninput="onInputchange()">
			</div>
<!-- 			<button class="layui-btn layui-btn-sm" style="float:right;" data-type="search">搜索</button>		 -->	
		</div>
		<input name="roleId" id="roleId" type="hidden"/>
		<div id="transferRoot"></div><!-- layui穿梭组件 -->
	</div>	

	<!-- 分配菜单权限模态框 -->
	<div id="mpp" style="display: none;">
		<div id="transfer" style="height:350px;">
			<ul id="menuTree" class="ztree"></ul>
		</div>
	</div>

	
</section>
<script th:src="@{/static/js/jquery-2.1.1.min.js}" type="text/javascript"></script>
<!-- <script th:src="@{/static/bootstrap/js/bootstrap.js}" type="text/javascript"></script> -->
<script th:src="@{/static/layui/layui.js}" type="text/javascript"></script>
<!-- <script th:src="@{/static/layui/transferTable.js}" type="text/javascript"></script> -->
<!-- <script th:src="@{/static/bootstrap/editable/js/bootstrap-editable.js}"></script>
<script th:src="@{/static/bootstrap/table/bootstrap-table.min.js}"></script>
<script th:src="@{/static/bootstrap/table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/static/bootstrap/table/extensions/editable/bootstrap-table-editable.min.js}"></script>
<script th:src="@{/static/miniui/miniui.js}"></script> -->
<script th:src="@{/static/bootstrap/toastr/toastr.min.js}"></script>
<script th:src="@{/static/bootstrap/zTree/jquery.ztree.core.js}"></script>
<script th:src="@{/static/bootstrap/zTree/jquery.ztree.excheck.js}"></script>
<script th:src="@{/static/bootstrap/zTree/jquery.ztree.exedit.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/aboutRole.js}"></script>
</body>
</html>
